<!--<template>
  <div class="main_contain">
    &lt;!&ndash; 使用 SVG 定义地图 &ndash;&gt;
    <img src="@/assets/img/map2.png" alt="China Map" class="map-image fade-in right-to-left">
    <svg class="map-overlay">
      <a v-for="(province,index) in listMap" @click="navigateTo(province)">
        <rect :x="province.location.x" :y="province.location.y" :width="province.location.w"
              :height="province.location.h" class="map-area"/>
      </a>
    </svg>
  </div>
</template>-->

<template>
  <div class="main_contain">
    <!-- 使用 SVG 定义地图 -->
    <img src="@/assets/img/map2.png" alt="China Map" class="map-image fade-in right-to-left">
    <svg class="map-overlay" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet">
      <a v-for="(province,index) in listMap" @click="navigateTo(province)">
        <rect :x="province.location.x" :y="province.location.y" :width="province.location.w"
              :height="province.location.h" class="map-area"/>
      </a>
    </svg>
  </div>
</template>



<script lang="ts" setup>
import {useRouter} from 'vue-router';
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";

// 路由实例
const router = useRouter();

const timeX = ref(1.01)
const offsetX = ref(-260)
const timeY = ref(1.006)
const offsetY = ref(10)

const listMap = reactive([
      {
        location: {x: 729 * timeX.value + offsetX.value, y: 665 * timeY.value + offsetY.value, w: 58, h: 20},
        province: "chongqing",
        provinceCN: "重庆市",
        lab: "Chongqing"
      },
      {
        location: {x: 960 * timeX.value + offsetX.value, y: 570 * timeY.value + offsetY.value, w: 25, h: 80},
        province: "anhui",
        provinceCN: "安徽省",
        lab: "Anhui"
      },
      {
        location: {x: 1120 * timeX.value + offsetX.value, y: 390 * timeY.value + offsetY.value, w: 75, h: 20},
        province: "beijing",
        provinceCN: "北京市",
        lab: "Beijing"
      },
      {
        location: {x: 980 * timeX.value + offsetX.value, y: 740 * timeY.value + offsetY.value, w: 65, h: 25},
        province: "fujian",
        provinceCN: "福建省",
        lab: "Fujian"
      },
      {
        location: {x: 665 * timeX.value + offsetX.value, y: 520 * timeY.value + offsetY.value, w: 70, h: 30},
        province: "gansu",
        provinceCN: "甘肃省",
        lab: "Gansu"
      },
      {
        location: {x: 880 * timeX.value + offsetX.value, y: 815 * timeY.value + offsetY.value, w: 75, h: 25},
        province: "guangdong",
        provinceCN: "广东省",
        lab: "Guangdong"
      },
      {
        location: {x: 740 * timeX.value + offsetX.value, y: 800 * timeY.value + offsetY.value, w: 110, h: 60},
        province: "guangxi",
        provinceCN: "广西壮族自治区",
        lab: "Guangxi"
      },
      {
        location: {x: 715 * timeX.value + offsetX.value, y: 730 * timeY.value + offsetY.value, w: 75, h: 30},
        province: "guizhou",
        provinceCN: "贵州省",
        lab: "Guizhou"
      },
      {
        location: {x: 800 * timeX.value + offsetX.value, y: 920 * timeY.value + offsetY.value, w: 50, h: 50},
        province: "hainan",
        provinceCN: "海南省",
        lab: "Hainan"
      },
      {
        location: {x: 900 * timeX.value + offsetX.value, y: 420 * timeY.value + offsetY.value, w: 50, h: 50},
        province: "hebei",
        provinceCN: "河北省",
        lab: "Hebei"
      },
      {
        location: {x: 850 * timeX.value + offsetX.value, y: 550 * timeY.value + offsetY.value, w: 85, h: 20},
        province: "henan",
        provinceCN: "河南省",
        lab: "Henan"
      },
      {
        location: {x: 1090 * timeX.value + offsetX.value, y: 160 * timeY.value + offsetY.value, w: 100, h: 20},
        province: "heilongjiang",
        provinceCN: "黑龙江省",
        lab: "Heilongjiang"
      },
      {
        location: {x: 840 * timeX.value + offsetX.value, y: 630 * timeY.value + offsetY.value, w: 70, h: 20},
        province: "hubei",
        provinceCN: "湖北省",
        lab: "Hubei"
      },
      {
        location: {x: 820 * timeX.value + offsetX.value, y: 715 * timeY.value + offsetY.value, w: 75, h: 20},
        province: "hunan",
        provinceCN: "湖南省",
        lab: "Hunan"
      },
      {
        location: {x: 1080 * timeX.value + offsetX.value, y: 260 * timeY.value + offsetY.value, w: 70, h: 30},
        province: "jilin",
        provinceCN: "吉林省",
        lab: "Jilin"
      },
      {
        location: {x: 995 * timeX.value + offsetX.value, y: 554 * timeY.value + offsetY.value, w: 45, h: 46},
        province: "jiangsu",
        provinceCN: "江苏省",
        lab: "Jiangsu"
      },
      {
        location: {x: 915 * timeX.value + offsetX.value, y: 712 * timeY.value + offsetY.value, w: 65, h: 18},
        province: "jiangxi",
        provinceCN: "江西省",
        lab: "Jiangxi"
      },
      {
        location: {x: 1025 * timeX.value + offsetX.value, y: 330 * timeY.value + offsetY.value, w: 70, h: 23},
        province: "liaoning",
        provinceCN: "辽宁省",
        lab: "Liaoning"
      },
      {
        location: {x: 670 * timeX.value + offsetX.value, y: 360 * timeY.value + offsetY.value, w: 150, h: 25},
        province: "neimenggu",
        provinceCN: "内蒙古自治区",
        lab: "Neimenggu"
      },
      {
        location: {x: 610 * timeX.value + offsetX.value, y: 250 * timeY.value + offsetY.value, w: 170, h: 25},
        province: "ningxia",
        provinceCN: "宁夏回族自治区",
        lab: "Ningxia"
      },
      {
        location: {x: 490 * timeX.value + offsetX.value, y: 480 * timeY.value + offsetY.value, w: 70, h: 25},
        province: "qinghai",
        provinceCN: "青海省",
        lab: "Qinghai"
      },
      {
        location: {x: 940 * timeX.value + offsetX.value, y: 475 * timeY.value + offsetY.value, w: 80, h: 25},
        province: "shandong",
        provinceCN: "山东省",
        lab: "Shandong"
      },
      {
        location: {x: 850 * timeX.value + offsetX.value, y: 420 * timeY.value + offsetY.value, w: 30, h: 85},
        province: "shan-xi",
        provinceCN: "山西省",
        lab: "Shǎnxi"
      },
      {
        location: {x: 750 * timeX.value + offsetX.value, y: 545 * timeY.value + offsetY.value, w: 70, h: 25},
        province: "shanvxi",
        provinceCN: "陕西省",
        lab: "Shanxi"
      },
      {
        location: {x: 1120 * timeX.value + offsetX.value, y: 625 * timeY.value + offsetY.value, w: 69, h: 20},
        province: "shanghai",
        provinceCN: "上海市",
        lab: "Shanghai"
      },
      {
        location: {x: 620 * timeX.value + offsetX.value, y: 635 * timeY.value + offsetY.value, w: 70, h: 20},
        province: "sichuan",
        provinceCN: "四川省",
        lab: "Sichuan"
      },
      {
        location: {x: 1110 * timeX.value + offsetX.value, y: 440 * timeY.value + offsetY.value, w: 75, h: 25},
        province: "tianjin",
        provinceCN: "天津市",
        lab: "Tianjin"
      },
      {
        location: {x: 275 * timeX.value + offsetX.value, y: 570 * timeY.value + offsetY.value, w: 120, h: 20},
        province: "xizang",
        provinceCN: "西藏自治区",
        lab: "Xizang"
      },
      {
        location: {x: 200 * timeX.value + offsetX.value, y: 315 * timeY.value + offsetY.value, w: 195, h: 25},
        province: "xinjiang",
        provinceCN: "新疆维吾尔自治区",
        lab: "Xinjiang"
      },
      {
        location: {x: 580 * timeX.value + offsetX.value, y: 780 * timeY.value + offsetY.value, w: 70, h: 25},
        province: "yunnan",
        provinceCN: "云南省",
        lab: "Yunnan"
      },
      {
        location: {x: 1005 * timeX.value + offsetX.value, y: 670 * timeY.value + offsetY.value, w: 75, h: 20},
        province: "zhejiang",
        provinceCN: "浙江省",
        lab: "Zhejiang"
      },
    ]
)

// 导航到指定页面
function navigateTo(region: any) {
  router.push({path: '/districtDetail', query: {provinceCN: region.provinceCN, province: region.province}});
}

const getProduct = () => {

}
getProduct();
</script>
<style scoped>
.main_contain {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.map-image {
  min-width: 100%;
  width: 100%;
  height: 100%;
}

.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.map-area {
  fill: rgba(255, 0, 0, 0);
  /* 半透明红色*/
  stroke: rgba(255, 255, 255, 0);
  stroke-width: 2;
  pointer-events: all;
  cursor: pointer;
}

.map-area:hover {
  fill: rgba(234, 228, 205, 0.3); /* 鼠标悬停时变暗 */
}
</style>


